@charset "utf-8";
{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
     background-image: url(../img/bj002.jpg);
     background-size: cover;
     background-repeat: no-repeat;

.jackie {
    width: 50px;
    height: 100px;
    background-color: blue;
	background: url(../img/cl_6.png) no-repeat center/cover;
    position: absolute;
    left: 10%;
	bottom: 10%;
    animation: jackieMove 4s infinite;
}

.demon {
    width: 50px;
    height: 100px;
    background-color: red;
	background: url(../img/cl-9.png) no-repeat center/cover;
    position: absolute;
    right: 10%;
	bottom: 10%;
    animation: demonMove 4s infinite;
}
@keyframes jackieMove {
    0% {
        left: 10%;
        transform: rotate(0deg);
    }
    25% {
        left: 30%;
		background: url(../img/cl_7.png);
        transform: rotate(10deg);
    }
    50% {
        left: 50%;
		background: url(../img/cl_2.png);
        transform: rotate(-10deg);
    }
    75% {
        left: 70%;
		background: url(../img/cl_1.png);
        transform: rotate(10deg);
    }
    100% {
        left: 90%;
		background: url(../img/cl_8.png);
        transform: rotate(0deg);
    }
}
@keyframes demonMove {
    0% {
        right: 10%;
        transform: rotate(0deg);
    }
    25% {
        right: 30%;
		background: url(../img/cl-3.png);
        transform: rotate(-10deg);
    }
    50% {
        right: 50%;
		background: url(../img/cl-5.png);
        transform: rotate(10deg);
    }
    75% {
        right: 70%;
		background: url(../img/cl-10.png);
        transform: rotate(-10deg);
    }
    100% {
        right: 90%;
		background: url(../img/cl-4.png);
        transform: rotate(0deg);
    }
}